import { Taro } from '@tarojs/taro'
import { CoverView, CoverImage, View, Image } from '@tarojs/components'
import './index.scss'

const CustomTabBar = () => {

    const state = {
        selected: 0,
        color: 'rgba(68, 68, 68, 1)',
        selectedColor: 'rgba(68, 68, 68, 1)',
        list: [
            {
                iconPath: '../pages/assert/Main_Icon_Paint2.png',
                selectedIconPath: '../pages/assert/Main_Icon_Paint.png',
                pagePath: 'pages/paint/index',
                text: '绘画',
            },
            {
                iconPath: '../pages/assert/Main_Icon_Learn2.png',
                selectedIconPath: '../pages/assert/Main_Icon_Learn.png',
                pagePath: 'pages/course/index',
                text: '学习',
            },
        ]
    }

    const switchTab = (item) => {
        const url = '../' + item.pagePath
        console.log('触发切换：', url)

        const pages = Taro.getCurrentPages()
        const currentPage = pages[pages.length - 1]
        if (currentPage.route === item.pagePath) {
            Taro.switchTab({
                url: url
            })
        } else {
            Taro.navigateTo({
                url: url
            })
        }
    }

    return (
        <View className='bottom-tab'>
            {
                state.list.map((item, index) => {
                    return <View className='bottom-tab-item' onClick={() => switchTab(item)} data-path={item.pagePath} key={item.text}>
                        <Image className='bottom-tab-item-img' src={state.selected === index ? item.selectedIconPath : item.iconPath} mode='aspectFill' />
                        <View className='bottom-tab-item-text' style={{ color: state.selected === index ? state.selectedColor : state.color }}>
                            {item.text}
                        </View>
                    </View>
                })
            }
        </View>
        // <View></View>
    )
}

export default CustomTabBar